<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --main-bg-color: #272626;
            --main-font-color: #e4d5d5;
        }

        * {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            box-sizing: border-box;
        }

        body {
            background: var(--main-bg-color);
            color: var(--main-font-color);
        }

        #search-input {
            padding: 12px;
            background: var(--main-bg-color);
            color: var(--main-font-color);
            font-size: 32px;
            width: 100%;
            outline: none;
            border: none;
            border: 2px solid #e4d5d5;
            /* Dark Grey */
            ;
        }

        .note-content p {
            font-size: 26px;
        }

        .note-content h1 {
            font-weight: 900;
        }

        .note-content {
            border: 1px solid rgb(168, 153, 153);
            margin-bottom: 16px;
            padding: 12px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.5/vue.global.min.js"
    type="application/javascript"></script>

<body>

    <h1>search.html </h1>

    <div style="padding: 26px;">
        <input type="text" id="search-input" onkeydown="go_search(this)">
    </div>



    <div id="qwe">

    </div>


    <div id="app">
        [[aaa]]

        <div style="padding: 15px; ">
            <div v-for="item in article" :key="item.id" class="note-content">
                <a href="${'/admin/edit/' + item.id }" target="_blank" style="float: right;  padding: 5px;  color: darkgray;   border: 1px dotted lightgrey;  ">Edit</a>
                <h1 onclick="show_content_tag(this)">[[ item.age ]] </h1>
                <div style="font-size: 20px; color: #888484;">
                    <!-- score : <span>[[ item.score ]] </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
                    <!-- name : <span>[[ item.file_name ]] </span> -->
                </div>
                <!-- <p class="hidden">[[ item.content ]] </p> -->
            </div>
        </div>

    </div>



</body>
<script>

    let url = decodeURIComponent(window.location.href);
    url = url.split("/");
    document.getElementById("search-input").value = url[url.length - 1];

    let raw_data = '{{ data|safe }}'
    console.log(raw_data);
    let article_data = JSON.parse(raw_data.replace(/\n/g, "\\n").replace(/\r/g, "\\r"))
    console.log(article_data);

    document.getElementById('qwe').innerText = '哈哈哈哈哈哈\n\n\n哈哈哈哈哈哈\n\n哈哈哈哈哈哈哈'


    const { createApp } = Vue
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                aaa: 1111,
                test_list: ["a111", "b222", "c3333"],
                message: "qweqweqweqwe",
                article: article_data
            }
        },
        methods: {
            add: function () {
                alert("哈哈哈哈 233333333")
            }
        }
    }).mount('#app')

    function go_search(eee) {
        if (event.keyCode == 13) {
            let search_str = document.getElementById("search-input").value;
            console.log(search_str);
            window.open("/search/" + search_str, "_self");
        }
    }

    function show_content_tag(eee) {
        eee.nextElementSibling.nextElementSibling.classList.toggle("hidden");
    }
</script>

</html>